<template>
  <div class="cs-page-container">
    <div class="cs-filter-container">
      <el-select
        v-model="listQuery.channel"
        clearable
        filterable
        placeholder="渠道"
      >
        <el-option
          v-for="(channel, i) in channels"
          :key="i"
          :label="channel"
          :value="channel"
        />
      </el-select>
      <el-date-picker
        v-model="daterangeValue"
        :picker-options="daterangePickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="起始时间"
        end-placeholder="结束时间"
        value-format="yyyy-MM-dd"
        clearable
        @change="daterangeChangedTimestamp"
      />
      <el-button
        type="primary"
        icon="el-icon-search"
        :loading="listLoading"
        @click="handleFilter"
      >查询</el-button>
      <el-button
        type="info"
        size="small"
        icon="el-icon-refresh-right"
        @click="resetFilter"
      >重置</el-button>
      <el-button
        type="warning"
        @click="exportFile"
      >导出</el-button>
    </div>
    <div class="cs-filter-result">
      <el-table
        v-loading="listLoading"
        :data="list"
        :height="'calc(100vh - 300px)'"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column
          align="center"
          label="日期"
        >
          <template slot-scope="{row}">
            <span>{{ row.targetDate | parseTime('{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="激活人数"
          prop="activateCount"
        >
        </el-table-column>

        <el-table-column
          align="center"
          label="活跃人数"
        >
          <template slot-scope="{row}">
            <span>{{ row.activeCount }}</span>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="总充值"
        >
          <template slot-scope="{row}">
            <span>{{ row.totalAmount / 100 }}</span>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="总充值次数"
          prop="totalCount"
        >
        </el-table-column>

        <el-table-column
          align="center"
          label="总充值人数"
          prop="distinctCount"
        >
        </el-table-column>

        <el-table-column
          align="center"
          label="付费率"
        >
          <template slot-scope="{row}">
            <span>
              {{ (row.distinctCount / row.activeCount * 100).toFixed(2) }} %
            </span>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="ARPU"
        >
          <template slot-scope="{row}">
            <span>
              {{ ((row.totalAmount / 100) / row.activeCount).toFixed(2) }}
            </span>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="ARPPU"
        >
          <template slot-scope="{row}">
            <span>
              {{ ((row.totalAmount / 100) / row.distinctCount).toFixed(2) }}
            </span>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="LTV"
        >
          <template slot-scope="{row}">
            <span>
              {{ (row.activateAmount / row.activateCount / 100).toFixed(2) }}
            </span>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="新手礼包"
        >
          <template slot-scope="{row}">
            <span>
              {{ row.newbeeAmount / 100 }}
            </span>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="新手礼包充值人数"
          prop="newbeeNumber"
        >
        </el-table-column>

        <el-table-column
          align="center"
          label="周/月卡充值"
        >
          <template slot-scope="{row}">
            <span>{{ row.cardAmount/100 }}</span>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="App充值"
        >
          <template slot-scope="{row}">
            <span>{{ row.generalAmount / 100 }}</span>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="app充值人数"
          prop="appNumber"
        >
        </el-table-column>

        <el-table-column
          align="center"
          label="Web充值"
        >
          <template slot-scope="{row}">
            <span>{{ row.webAmount / 100 }}</span>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="web充值人数"
          prop="webNumber"
        >
        </el-table-column>

        <el-table-column
          align="center"
          label="vip充值"
        >
          <template slot-scope="{row}">
            <span>{{ row.fatAmount / 100 }}</span>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="vip充值人数"
          prop="vipNumber"
        >
        </el-table-column>

        <el-table-column
          align="center"
          label="首次付费人数"
          prop="firstRecharge"
        >
        </el-table-column>

        <el-table-column
          align="center"
          label="首次充值总金额"
          prop="firstRechargeAmount"
        >
          <template slot-scope="{row}">
            <span>{{ row.firstRechargeAmount / 100 }}</span>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="积分兑换钻石"
        >
          <template slot-scope="{row}">
            <span>{{ row.diamondByScore / 10 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="钻石存量"
        >
          <template slot-scope="{row}">
            <span>{{ row.totalDiamond / 10 }}</span>
          </template>
        </el-table-column>
      </el-table>
      <TablePagination
        :current-page="listQuery.page"
        :limit="listQuery.limit"
        :total="total"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChangeOffset"
      />
    </div>
  </div>
</template>

<script>
import TablePagination from '@/components/TablePagination/index'
import DATEPICKER_OPTIONS from '@/config/datepickerOptions'
import { xhrRechargeList } from '@/api/analysis'
import { parseTime } from '@/utils'

export default {
  name: 'RechargeList',
  components: { TablePagination },
  data() {
    return {
      list: [],
      channels: [],
      total: 0,
      listQuery: {
        offset: 0,
        limit: 100,
        startTime: null,
        endTime: null,
        channel: null,
        gender: null
      },
      daterangeValue: '',
      daterangePickerOptions: DATEPICKER_OPTIONS.daterangePickerOptions
    }
  },
  created() {
    this.getChannels()
    this.doSearch()
  },
  methods: {
    getChannels() {
      this.xhrGetChannels().then(resp => {
        this.channels = resp.data
      })
    },
    exportFile() {
      const header = {
          targetDate: '日期',
          activateCount: '激活人数',
          activeCount: '登录人数',
          totalAmount: '总充值',
          newbeeAmount: '新手礼包',
          cardAmount: '周',
          generalAmount: 'App充值',
          webAmount: 'Web充值',
          fatAmount: 'vip充值',
          distinctCount: '充值人数',
          diamondByScore: '积分兑换钻石',
          totalDiamond: '钻石存量'
        }
        const data = this.formatJson(Object.keys(header), this.list)
        import('@/vendor/Export2Excel').then(excel => {
          excel.export_json_to_excel({
            header: Object.values(header), // 表头 必填
            data, // 具体数据 必填
            filename: 'order-list', // 非必填
            bookType: 'csv'
          })
        })
    },
    formatJson(filterVal, jsonData) {
      const list = [
        'totalAmount',
        'newbeeAmount',
        'cardAmount',
        'generalAmount',
        'webAmount',
        'fatAmount'
      ]
      return jsonData.map(v => filterVal.map(j => {
        if (list.includes(j)) {
          return v[j] / 100
        } else if (j === 'targetDate') {
          return parseTime(v[j], '{y}-{m}-{d}')
        } else if (j === 'totalDiamond' | j === 'diamondByScore') {
          return v[j] / 10
        } else {
          return v[j]
        }
      }))
    },
    doSearch() {
      xhrRechargeList(this.listQuery).then(resp => {
        this.listLoading = false
        this.total = resp.data.count
        this.list = resp.data.list
      })
    }
  }
}
</script>
